import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Tabs, Toast } from 'antd-mobile';
import { Link, browserHistory } from 'dva/router';

// style
// import styles from './index.css';
import IconfontStyle from '../../assets/iconfont/iconfont.css';

// widget 
import HeadNav from '../Common/HeadNav';
import BuyCarFooter from './BuyCarFooter';
import BuyCarBody from './BuyCarBody';

// utils
import dataCenter from '../../utils/dataCenter'

import { getUserId } from '../../utils/utils'

class BuyCar extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.fullStore = props.buycar.cartList || []
        this.state = {
        	checkAll: false,
        	checkboxChecked: false,
        	totalCount: 0,
        	totalPrice: 0
        }
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.buycar.cartList != this.props.buycar.cartList) {
        	this.fullStore = nextProps.buycar.cartList || []

            this.mergeStore({})
        }   
    }
    componentDidMount() {
    	const { dispatch } = this.props
    	dispatch({
            type: 'buycar/fetchCartList',
            payload: getUserId()
        })
    }

    /**
     * itemState {
		stepValue,
		checkItemAll,
		goodsStep,
		goodsCheckbox
     }
     */
    mergeStore(fakeStore) {
    	let checkboxChecked = true
    	let totalPrice = 0
    	let totalCount = 0

    	const fakeBuycar = JSON.parse(JSON.stringify(this.fullStore))

    	fakeBuycar.map(store => {
    		if(store.brandId === fakeStore.brandId) {
    			store.goodsList = fakeStore.goodsList
    			store.isChecked = fakeStore.isChecked
    		}
    	})
    	let priceCount = this.countPriceCount(fakeBuycar)

    	fakeBuycar.map(store => {
    		store.goodsList.map(good => {
    			if(!good.checked) {
    				checkboxChecked = false
    			}
    		})
    	})

        dataCenter.buycar.fullStore = fakeBuycar
    	this.fullStore = fakeBuycar

    	this.setState({
    		checkboxChecked,
    		...priceCount
    	})
    }
    countPriceCount(buycar) {
    	let totalPrice = 0
    	let totalCount = 0

    	buycar.map(store => {
    		store.goodsList.map(good => {
    			if(good.checked) {
    				totalCount += good.number
    				totalPrice += parseFloat(parseFloat(good.number * good.goodsPrice).toFixed(2))
    			}
    		})
    	})
    	return {
    		totalPrice,
    		totalCount
    	}
    }
    changeCheckAll(checkAll) {
    	this.setState({
    		checkAll,
    		checkboxChecked: checkAll
    	})
    }

    onSubmitOrder() {
        let priceCount = this.countPriceCount(this.fullStore)
        if(priceCount.totalCount > 0) {
            browserHistory.push('/order')
        } else {
            Toast.info('请选择一个商品!', 1)
        }
    }
    
	render() {
	 	return (
	 		<div className="buy-car">
	 			 <HeadNav title="要买的宝贝" noLeftIcon={true} />
		         <BuyCarBody 
		         	mergeStore={this.mergeStore}
		         	checkAll={this.state.checkAll}
		         	{...this.props}/>
		         <BuyCarFooter 
		         	checkboxChecked={this.state.checkboxChecked}
		         	totalCount={this.state.totalCount}
		         	totalPrice={this.state.totalPrice}
		         	changeCheckAll={this.changeCheckAll}
                    onSubmit={this.onSubmitOrder}
		         	{...this.props}/>
	 		</div>
	  	);
	}
};

BuyCar.propTypes = {
};

export default BuyCar
